<template>
  <div class="song-list">
    <ul>
      <li @click="selectItem(song, index)" class="item" v-for="(song, index) in songs" :key="index">
        <div class="rank" v-show="rank">
          <span :class="getRankCls(index)" v-text="index+1"></span>
        </div>
        <div class="content">
          <h2 class="name">{{song.name}}</h2>
          <p class="desc">{{getDesc(song)}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
    data () {
        return  {
            rank: false
        }
    },
    methods: {
        selectItem (item,index) {
          this.$emit('select',item,index)
        },
        getRankCls (index) {
            if (index <= 2) {
                return `icon icon${index}`
            } else {
                return 'text'
            }
        },
        getRankText() {

        },
        getDesc (song) {
          let desc = ''
          try{
            if(song.album.name) {
              desc = song.album.name
            }
          }catch(e){
            if(e) {
              this.rank = true
            }
          }
          return desc
        }
    },
    props: {
        songs: {
            type: Array,
            default: []
        }
    },
    watch: {
        songs () {
            console.log(this.songs)
        }
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"

  .song-list
    .item
      display: flex
      align-items: center
      box-sizing: border-box
      height: 64px
      font-size: $font-size-medium
      .rank
        flex: 0 0 25px
        width: 25px
        margin-right: 30px
        text-align: center
        .icon
          display: inline-block
          width: 25px
          height: 24px
          background-size: 25px 24px
          &.icon0
            bg-image('first')
          &.icon1
            bg-image('second')
          &.icon2
            bg-image('third')
        .text
          color: $color-theme
          font-size: $font-size-large
      .content
        flex: 1
        line-height: 20px
        overflow: hidden
        margin 0px 20px
        text-align left
        .name
          no-wrap()
          color: $color-text
        .desc
          no-wrap()
          margin-top: 4px
          color: $color-text-d
</style>
